<template>
  <section>
    <cj-popup v-model="showWeaAppDialog" :closeable="true" close-icon-position="bottom-center" close-icon="icon-shanchu" @closed="closeWeaAppDialog" class="c-w80vw c-br6">
      <div class="c-ph40 c-bg-white c-pb44 c-flex-column c-br10 c-p">
        <wx-open-launch-weapp
          v-if="recordingSetting && recordingSetting.ckStuMiniProgram == 1"
          :id="'launchBtn'"
          :appId="appId"
          :path="`${path}?${wxappQuery}`"
          class="c-w100 c-h c-pa c-p-l0 c-p-t0 c-text-hidden"
          @click='showWeaAppDialog = false'
          @error="handleErrorFn"
          @launch="handleLaunch"
          @ready="handleReady"
        >
          <script type="text/wxtag-template">
            <style>.masker {width: 100%; height: 10000px; opacity:0}</style>
            <div class="masker">打开{{getWxappName}}小程序观看</div>
          </script>
        </wx-open-launch-weapp>
        <div class="c-fs24 c-fc-xblack c-textAlign-c c-pt60 c-pb40">
          商家已设置课程仅支持在{{getWxappName}}{{pointText[0]}}观看，其他终端无法观看，请登录{{pointText[1]}}观看课程</div>
        <template v-if="recordingSetting && recordingSetting.ckStuMiniProgram == 1">
          <div class="c-w100 c-hh60 c-flex-row c-flex-center c-br30 c-fs24 c-fc-white theme-bg">
            打开{{getWxappName}}小程序观看
          </div>
        </template>
      </div>
    </cj-popup>
  </section>
</template>

<script>
let env = window.location.host.indexOf('test') > -1 ? 0 : 1;
export default {
  name: "ScreenRecordingSetting",
  components: {
  },
  props: {
    showWeaAppDialog: {
      type: Boolean,
      default: false
    },
    prodInfo: {
      type: Object,
      default: null
    },
    recordingSetting: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      companyId: localStorage.getItem("companyId"),
      userId:  localStorage.getItem("userId"),
      token: localStorage.getItem("token"),
    };
  },
  computed: {
    // 获取跳转小程序按钮的提示文案
    getWxappName() {
      return this.prodInfo && this.prodInfo.prodType == global.ckFrom.live ? '创客直播' : '创客匠人'
    },
    appId() {
      // 直播模块跳转到创匠直播小程序
      if (this.prodInfo && this.prodInfo.prodType == global.ckFrom.live) {
        return 'wx0d7934cc4cdcdd64';
      }
      // 创客匠人小程序
      return 'wx032bc58d1be3d3e2';
    },
    path() {
      let xcxPath = '';
      if (this.prodInfo) {
        switch (this.prodInfo.prodType) {
          case 5:
            if (this.prodInfo.courseType == 2) {
              xcxPath = '/pages/home/course/article/index';
            } else if (this.prodInfo.courseType == 1) {
              xcxPath = '/pages/home/course/audio/index';
            } else {
              xcxPath = '/pages/home/course/video/index';
            }
            break;
          case 9:
            xcxPath = '/pages/home/column/index';
            break;
          case 51:
            const host = window.location.host;
            const env = host.indexOf('kptest') > -1 ? 1 : host.indexOf('formal') > -1 ? 2 : 3; // 1 开发环境  2formal  3正式
            xcxPath = `/pages/index/index?env=${env}`;
            break;
          case 61:
            xcxPath = '/pages/webView/index';
            break;
          case 75:
          case 78:
        }
      }
      return xcxPath;
    },
    wxappQuery() {
      let xcxQuery = '';
      if (this.prodInfo) {
        switch (this.prodInfo.prodType) {
          case 5:
            xcxQuery = `courseId=${this.prodInfo.prodId}&c=${this.companyId}&u=${this.userId}&env=${env}`;
            break;
          case 9:
            xcxQuery = `extId=${this.prodInfo.prodId}&c=${this.companyId}&u=${this.userId}&env=${env}`;
            break;
        }
      }
      return xcxQuery;
    },
    pointText() {
      let showText = ['', ''];
      if (this.recordingSetting && this.recordingSetting.ckStuApp == 1 && this.recordingSetting.ckStuMiniProgram == 1) {
        showText[0] = '小程序/app'
        showText[1] = '小程序或app'
      } else if (this.recordingSetting && this.recordingSetting.ckStuApp == 1) {
        showText[0] = 'app'
        showText[1] = 'app'
      } else if (this.recordingSetting && this.recordingSetting.ckStuMiniProgram == 1) {
        showText[0] = '小程序'
        showText[1] = '小程序'
      }
      return showText;
    }
  },
  activated() {
  },
  methods: {
    handleLaunch(e) {
      console.log('handleLaunch---', e)
    },
    handleErrorFn(e) {
      this.$showCjToast({
        text: e.errMsg || '无法打开小程序，请升级微信版本',
        type: "warn",
        time: 1500
      })
    },
    handleReady(e) {
      console.log('handleReady---', e)
    },
    closeWeaAppDialog() {
      this.$emit('closeWeaAppDialog');
    }
  }
};
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.notice-color {
  color: #ff300c;
}
.dialog-demo .weui-dialog {
  overflow: visible;
}
.close-icon {
  position: absolute;
  left: 50%;
  bottom: -2rem;
  transform: translateX(-50%);
}
.input-pwd {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  border-bottom: 1px solid #e6e6e6;
}
</style>
